<template>
  <div class="detail" v-if="info">
    <div class="no">
      <div class="flexsb">
        <div class="wp-50">报价单编号： {{ info.quotationNo }}</div>
      </div>
    </div>

    <div class="info">
      <div class="tit">报价说明</div>
      <div class="con mt-2">
        {{ info.quotationDescription }}
      </div>
    </div>

    <div class="no mt-3">
      <div class="flexsb">
        <div class="wp-50">
          外协单单编号： {{ info.assistShowInfoVo.orderNo }}
        </div>
      </div>
    </div>

    <div class="info ship mt-2" v-if="info.shcwShippingVo">
      <div class="tit">船舶信息</div>
      <div class="con attr mt-2">
        <div class="item">
          <span>船舶名称:</span>
          <span>{{ info.shcwShippingVo.shippingName }}</span>
        </div>
        <div class="item">
          <span>IMO编号:</span>
          <span>{{ info.shcwShippingVo.shippingNo }}</span>
        </div>
        <div class="item">
          <span>船舶类型:</span>
          <span>
            <dict-tag
              :options="dict.type.ships_type"
              :value="info.shcwShippingVo.shippingType"
            />
          </span>
        </div>
        <div class="item">
          <span>总长:</span>
          <span>{{ info.shcwShippingVo.totalLength }}</span>
        </div>
        <div class="item">
          <span>建造时间（船龄）:</span>
          <span>{{ info.shcwShippingVo.yearOfConstruction }}</span>
        </div>
        <div class="item">
          <span>国籍:</span>
          <span>{{ info.shcwShippingVo.nationality }}</span>
        </div>
        <div class="item">
          <span>船级社:</span>
          <span>
            <dict-tag
              :options="dict.type.classification_society"
              :value="info.shcwShippingVo.classificationSociety"
            />
          </span>
        </div>
        <div class="item">
          <span>船港籍:</span>
          <span>{{ info.shcwShippingVo.portRegistry }}</span>
        </div>
        <div class="item">
          <span>船东:</span>
          <span>{{ info.shcwShippingVo.shipowner }}</span>
        </div>
        <div class="item">
          <span>船管:</span>
          <span>{{ info.shcwShippingVo.shipManagement }}</span>
        </div>
      </div>
    </div>

    <div class="info mt-3" v-else>
      <div class="tit">船舶信息</div>
      <div class="con flexsb mt-2">
        <div>修船厂名称: {{ info.shipRepairYardName }}</div>
        <div>所在国家:{{ info.repairYardCountries }}</div>
        <div>地址:{{ info.repairYardArea }}</div>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">服务所需信息</div>
      <div class="con mt-2">
        <div class="con mt-2" v-if="[63, 64].includes(info.assistShowInfoVo.projectLargeId)">
          <div class="grid-3 gap-1">
            <div>港口: {{ info.assistShowInfoVo.harbor }}</div>
            <div>
              到达时间: {{ parseTime(info.assistShowInfoVo.arrivalTime, "{y}-{m}-{d}") }}
            </div>
            <div>
              离港时间: {{ parseTime(info.assistShowInfoVo.departureTime, "{y}-{m}-{d}") }}
            </div>
            <div>代理: {{ info.assistShowInfoVo.agent }}</div>
            <div class="flexsc">
              报价单币种:
              <dict-tag
                :options="dict.type.currency"
                :value="info.assistShowInfoVo.quoteOrderCurrency"
              />
            </div>
          </div>
          <div class="mt-1">
            <div>委修方要求: {{ info.assistShowInfoVo.requestDescription }}</div>
          </div>
        </div>

        <div class="con mt-2" v-if="[65].includes(info.assistShowInfoVo.projectLargeId)">
          <div class="grid-4 gap-1">
            <div>服务人数: {{ info.assistShowInfoVo.servicePersonCount }}</div>
            <div>服务地点: {{ info.assistShowInfoVo.serviceLocation }}</div>
            <div>
              服务时间: {{ parseTime(info.assistShowInfoVo.serviceTime, "{y}-{m}-{d}") }}
            </div>
            <div>服务天数: {{ info.assistShowInfoVo.serviceDayCount }}</div>
            <div class="flexsc">
              报价单币种:
              <dict-tag
                :options="dict.type.currency"
                :value="info.assistShowInfoVo.quoteOrderCurrency"
              />
            </div>
          </div>
          <div class="mt-1">
            <div>委修方要求: {{ info.assistShowInfoVo.requestDescription }}</div>
          </div>
        </div>

        <div class="con mt-2" v-if="[66].includes(info.assistShowInfoVo.projectLargeId)">
          <div class="grid-3 gap-1">
            <div>港口: {{ info.assistShowInfoVo.harbor }}</div>
            <div>
              到达时间: {{ parseTime(info.assistShowInfoVo.arrivalTime, "{y}-{m}-{d}") }}
            </div>
            <div>
              离港时间: {{ parseTime(info.assistShowInfoVo.departureTime, "{y}-{m}-{d}") }}
            </div>
            <div class="flexsc">
              报价单币种:
              <dict-tag
                :options="dict.type.currency"
                :value="info.assistShowInfoVo.quoteOrderCurrency"
              />
            </div>
          </div>
          <div class="mt-1">
            <div>委修方要求: {{ info.assistShowInfoVo.requestDescription }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">{{ info.projectLargeName }}外协项目</div>
      <div class="table">
        <u-table
          ref="plTable"
          :data="info.assistQuotationDetailList"
          :height="700"
          use-virtual
          showBodyOverflow="title"
          showHeaderOverflow="title"
          :row-height="55"
          border
        >
          <u-table-column
            v-for="(item, index) in columns"
            :key="index"
            :resizable="item.resizable"
            :show-overflow-tooltip="item.showOverflow"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :width="item.width"
          />
        </u-table>
      </div>
    </div>

    <div class="info mt-3">
      <div class="tit">附件</div>
      <div class="con mt-2">
        <div v-for="(item, index) in info.urlList" :key="index">
          <a :href="item" target="_blank">
            {{ item }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { viewAssistOuotation } from "@/api/system/quotation";

export default {
  name: "assistOrderDetail",
  dicts: ["ships_type", "classification_society", "currency"],
  components: {},
  props: {},
  data() {
    return {
      info: null,
      columns: [],
    };
  },
  async created() {
    await this.getData();
    this.getColumns();
  },
  methods: {
    async getData() {
      await viewAssistOuotation({
        quotationId: this.$route.query.id,
      }).then(({ data }) => {
        data.assistQuotationDetailList.forEach((item) => {
          item.assistSpec_assistModel = `${item.assistSpec},${item.assistModel}`;
        });
        this.info = data;
      });
    },
    getColumns() {
      const arr_63 = [
        {
          label: "修理内容",
          prop: "assistName",
        },
        {
          label: "规格型号",
          prop: "assistSpec",
        },
        {
          label: "单位",
          prop: "unit",
        },
        {
          label: "数量",
          prop: "requireCount",
        },
      ];
      const obj = {
        63: arr_63,
        64: arr_63,
        65: [
          {
            label: "服务内容",
            prop: "assistName",
          },
          {
            label: "单位（人.天）",
            prop: "unit",
          },
          {
            label: "数量",
            prop: "requireCount",
          },
        ],
        66: [
          {
            label: "服务内容",
            prop: "assistName",
          },
          {
            label: "单位",
            prop: "unit",
          },
          {
            label: "数量",
            prop: "requireCount",
          },
        ],
      };
      this.columns = [
        ...(obj[this.info.assistShowInfoVo.projectLargeId] || []),
        {
          label: "单价",
          prop: "price",
        },
        {
          label: "折扣",
          prop: "discount",
        },
        {
          label: "金额",
          prop: "amount",
        },
        {
          label: "说明",
          prop: "remark",
          showOverflow: true,
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 40px;

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .flexsc {
    display: flex;
    justify-content: flex-start;
  }

  .info {
    background: #fff;
    padding: 24px 0;
    border-bottom: 1px dashed #333;
    > .tit {
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .no {
    background: #fff;
    padding: 10px 0;
    border-bottom: 2px solid #333;
    > .tit {
      font-weight: bold;
      padding: 10px 0;
    }
  }

  .attr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 15px;
    span {
      display: inline-block;
      &:first-of-type {
        margin-right: 5px;
        width: 180px;
      }
    }
  }
}
</style>
